var arrVisitors = new Array();
var Qdata = document.getElementById("Qdiv");
var qdata = Qdata.getElementsByTagName("input");
var Apdata = document.getElementById("Apdiv");
var apdata = Apdata.getElementsByTagName("input");
var j = 0;
for(var i = 0; i<qdata.length; i++){
    if (i % 3 == 0) {
        arrVisitors[i] = apdata[j].value + "单选," + qdata[i].value;
    }
    if (i % 3 == 1) {
        arrVisitors[i] = apdata[j].value + "多选," + qdata[i].value;
    }
    if (i % 3 == 2) {
        arrVisitors[i] = apdata[j].value + "判断," + qdata[i].value;
        j++;
    }
}
var canvas;
var context;
// chart properties
var cWidth, cHeight, cMargin, cSpace;
var cMarginSpace, cMarginHeight;
// bar properties
var bWidth, bMargin, totalBars, maxDataValue;
// bar animation
var ctr, numctr, speed;
// axis property
var totLabelsOnYAxis;
// barchart constructor

function drawCircle(canvasId, data_arr, color_arr, text_arr)
{
    var c = document.getElementById(canvasId);
    var ctx = c.getContext("2d");

    var radius = c.height / 2 - 20; //半径
    var ox = radius + 20, oy = radius + 20; //圆心

    var width = 30, height = 10; //图例宽和高
    var posX = ox * 2 + 20, posY = 30;   //
    var textX = posX + width + 5, textY = posY + 10;

    var startAngle = 0; //起始弧度
    var endAngle = 0;   //结束弧度
    for (var i = 0; i < data_arr.length; i++)
    {
        //绘制饼图
        endAngle = endAngle + data_arr[i] * Math.PI * 2; //结束弧度
        ctx.fillStyle = color_arr[i];
        ctx.beginPath();
        ctx.moveTo(ox, oy); //移动到到圆心
        ctx.arc(ox, oy, radius, startAngle, endAngle, false);
        ctx.closePath();
        ctx.fill();
        startAngle = endAngle; //设置起始弧度

        //绘制比例图及文字
        ctx.fillStyle = color_arr[i];
        ctx.fillRect(posX, posY + 20 * i, width, height);
        ctx.moveTo(posX, posY + 20 * i);
        ctx.font = 'bold 15px 微软雅黑';    //斜体 30像素 微软雅黑字体
        ctx.fillStyle = color_arr[i]; //"#000000";
        var percent = text_arr[i] + "：" + 100 * data_arr[i] + "%";
        ctx.fillText(percent, textX, textY + 20 * i);
    }
}

function init() {
    //绘制饼图
    //比例数据和颜色
    var data_arr = new Array();

    var Sdata = document.getElementById("Sdiv");
    var sdata = Sdata.getElementsByTagName("input");
    for(var i = 0; i<sdata.length; i++){
        data_arr[i] = sdata[i].value;
    }
    var color_arr = ["red", "darkorange", "greenyellow", "limegreen"];
    var text_arr = ["不及格", "及格", "良好", "优秀"];

    drawCircle("canvas_circle", data_arr, color_arr, text_arr);
}

//页面加载时执行init()函数
window.onload = function () {
    barChart();
    init();
};



function barChart() {
    canvas = document.getElementById('bchart');
    if (canvas && canvas.getContext) {
        context = canvas.getContext('2d');
    }
    chartSettings();
    drawAxisLabelMarkers();
    drawChartWithAnimation();
}
// initialize the chart and bar values
function chartSettings() {
    // chart properties
    cMargin = 25;
    cSpace = 60;
    cHeight = canvas.height - 2 * cMargin - cSpace;
    cWidth = canvas.width - 2 * cMargin - cSpace;
    cMarginSpace = cMargin + cSpace;
    cMarginHeight = cMargin + cHeight;
    // bar properties
    bMargin = 15;
    totalBars = arrVisitors.length;
    bWidth = (cWidth / totalBars) - bMargin;
    // find maximum value to plot on chart
    maxDataValue = 0;
    for (var i = 0; i < totalBars; i++) {
        var arrVal = arrVisitors[i].split(",");
        var barVal = parseInt(arrVal[1]);
        if (parseInt(barVal) > parseInt(maxDataValue))
            maxDataValue = barVal;
    }
    maxDataValue = maxDataValue + 10;
    totLabelsOnYAxis = 10;
    context.font = "10pt Garamond";

    // initialize Animation variables
    ctr = 0;
    numctr = 100;
    speed = 1;
}
// draw chart axis, labels and markers
function drawAxisLabelMarkers() {
    context.lineWidth = "2.0";
    // draw y axis
    drawAxis(cMarginSpace, cMarginHeight, cMarginSpace, cMargin);
    // draw x axis
    drawAxis(cMarginSpace, cMarginHeight, cMarginSpace + cWidth, cMarginHeight);
    context.lineWidth = "1.0";
    drawMarkers();
}
// draw X and Y axis
function drawAxis(x, y, X, Y) {
    context.beginPath();
    context.moveTo(x, y);
    context.lineTo(X, Y);
    context.closePath();
    context.stroke();
}
// draw chart markers on X and Y Axis
function drawMarkers() {
    var numMarkers = parseInt(maxDataValue / totLabelsOnYAxis);
    context.textAlign = "right";
    context.fillStyle = "#000";;
    // Y Axis
    for (var i = 0; i <= totLabelsOnYAxis; i++) {
        markerVal = i * numMarkers;
        markerValHt = i * numMarkers * cHeight;
        var xMarkers = cMarginSpace - 5;
        var yMarkers = cMarginHeight - (markerValHt / maxDataValue);
        context.fillText(markerVal, xMarkers, yMarkers, cSpace);
    }
    // X Axis
    context.textAlign = 'center';
    for (var i = 0; i < totalBars; i++) {
        arrval = arrVisitors[i].split(",");
        name = arrval[0];
        markerXPos = cMarginSpace + bMargin
            + (i * (bWidth + bMargin)) + (bWidth/2);
        markerYPos = cMarginHeight + 10;
        context.fillText(name, markerXPos, markerYPos, bWidth);
    }
    context.save();
    context.font = "bold 15px 微软雅黑";
    // Add Y Axis title
    context.translate(cMargin + 10, cHeight / 2);
    context.rotate(Math.PI * -90 / 180);
    context.fillText('题 目 数 量', 0, 0);
    context.restore();
}
function drawChartWithAnimation() {
    // Loop through the total bars and draw
    for (var i = 0; i < totalBars; i++) {
        var arrVal = arrVisitors[i].split(",");
        bVal = parseInt(arrVal[1]);
        bHt = (bVal * cHeight / maxDataValue) / numctr * ctr;
        bX = cMarginSpace + (i * (bWidth + bMargin)) + bMargin;
        bY = cMarginHeight - bHt - 2;
        drawRectangle(bX, bY, bWidth, bHt, true,i);
    }
    // timeout runs and checks if bars have reached
    // the desired height; if not, keep growing
    if (ctr < numctr) {
        ctr = ctr + 1;
        setTimeout(arguments.callee, speed);
    }
}
function drawRectangle(x, y, w, h, fill,i) {
    context.beginPath();
    context.rect(x, y, w, h);
    context.closePath();
    context.stroke();
    if (fill) {
        var gradient = context.createLinearGradient(0, 0, 0, 300);
        if (i%3==0) {
            gradient.addColorStop(0, 'green');
            gradient.addColorStop(1, 'rgba(67,203,36,.15)');
        }
        if (i%3==1) {
            gradient.addColorStop(0, 'blue');
            gradient.addColorStop(1, 'rgba(67,100,36,.15)');
        }
        if (i%3==2) {
            gradient.addColorStop(0, 'purple');
            gradient.addColorStop(1, 'rgba(67,50,36,.15)');
        }
        context.fillStyle = gradient;
        context.strokeStyle = gradient;
        context.fill();
    }
}